<template>
  <div class="all">
    <header>
        <div class="div" @click="back()">
          <img src="../../assets/返回.png" alt="">
          <span class="solt">返回</span>
        </div>
        <div class="div">
          <span>专项档案</span>
        </div>
        <div class="div"></div>
      </header>
    <div class="content">
      <van-empty
        style="width: 100%;height: 100%"
        v-if="isCanji === false && role <= 1"
        class="custom-image"
        description="暂无专项档案~"
        :image="require('../../assets/暂无数据.png')"
      >
      </van-empty>
      <div class="divList" v-for="(item, index) in list" v-show="item.show === true" :key="index" style="background: white">
        <ul
            @click="clickType(item)">
          <li>
            <img :src="item.img"
                 style="width: 22px;height: 20px;margin-right: 5px"
                 alt="">
            <span style="display: flex" :class="[item.url === '' ? 'no' : '']">
              <a v-if="item.url === ''">新建</a>
              {{item.name}}</span>
          </li>
          <li>
            <button  @click.stop="lookMoBan()" v-if="isCanji === false &&  role > 1 && item.name === '新建残疾人档案'" class="btnSty">样式查看</button>
            <img src="../../assets/更多灰@2x.png"
                 style="width: 7px;height: 13px;" alt="">
          </li>
        </ul>
      </div>
    </div>
    </div>
</template>

<script>
// import videoHttp from '../../http/video.http'
import {Toast} from 'vant'
export default {
  name: 'FilesZhuanXiang',
  data () {
    return {
      list: [
        {
          name: '残疾人档案',
          img: require('../../assets/残疾人档案@2x.png'),
          url: '1',
          show: false
        },
        {
          name: '高血压档案',
          img: require('../../assets/高血压档案灰@2x.png'),
          url: '',
          show: false
        },
        {
          name: '糖尿病档案',
          img: require('../../assets/糖尿病档案灰@2x.png'),
          url: '',
          show: false
        },
        {
          name: '老年人档案',
          img: require('../../assets/老年人档案灰@2x.png'),
          url: '',
          show: false
        },
        {
          name: '妇女档案',
          img: require('../../assets/妇女档案灰@2x.png'),
          url: '',
          show: false
        },
        {
          name: '儿童档案',
          img: require('../../assets/儿童档案灰@2x.png'),
          url: '',
          show: false
        }
      ],
      id: this.$route.query.jmx_user_id,
      userid: this.$route.query.userid,
      gerenid: '',
      sex: this.$route.query.sex,
      age: this.$route.query.age,
      role: '',
      isCanji: false,
      disid: ''
    }
  },
  mounted () {
    if (sessionStorage.getItem('filesInfo') !== null) {
      var data = JSON.parse(sessionStorage.getItem('filesInfo'))
      this.sex = data.sex
      this.age = data.age
    }
    // this.getPerson()
    this.getUsePerson()
    this.getDangAnPerson()
  },
  methods: {
    // 查看模板
    lookMoBan () {
      this.$router.push({path: '/canjiMoban'})
    },
    // 判断操作人是医生还是患者还是其他
    getUsePerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.role = Number(res.data.data.role)
            sessionStorage.setItem('role', this.role)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 我的档案进入 获取个人基本信息
    getDangAnPerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.gerenid = res.data.data.id
            // 查询是否有残疾人档案
            this.$http.findOneDisPeople({data_user_id: this.id})
              .then(res => {
                console.log(res)
                if (res.data.fail === true) {
                  this.isCanji = false
                  if (this.role > 1 || (this.role === 1 && this.isCanji === true)) {
                    this.list[0].show = true
                  }
                  // 没有残疾人档案
                  window.localStorage.setItem('disid', JSON.stringify({id: ''}))
                  window.localStorage.setItem('userid', JSON.stringify({id: this.userid}))
                  window.localStorage.setItem('gerenid', JSON.stringify({id: this.gerenid}))
                  this.list[0].name = '新建残疾人档案'
                  // window.location.href = videoHttp.Http + 'vue_disabler/#/newperple?userid=' + this.userid
                } else {
                  this.isCanji = true
                  if (this.role > 1 || (this.role === 1 && this.isCanji === true)) {
                    this.list[0].show = true
                  }
                  this.disid = res.data.disid
                  this.list[0].name = '查看残疾人档案'
                  window.localStorage.setItem('disid', JSON.stringify({id: res.data.disid}))
                  window.localStorage.setItem('userid', JSON.stringify({id: this.userid}))
                  window.localStorage.setItem('gerenid', JSON.stringify({id: this.gerenid}))
                  // window.location.href = videoHttp.Http + 'vue_disabler/#/admin?userid=' + this.userid + '&id=' + res.data.disid
                }
              })
              .catch(err => {
                console.log(err)
              })
            if (this.role > 1) {
              this.list[1].show = true
              this.list[2].show = true
            }

            if (Number(this.age) < 6 && Number(this.age) > 0 && this.role > 1) {
              this.list[5].show = true
            }
            // // 妇女
            if (Number(this.age) <= 45 && Number(this.age) > 15 && (Number(this.sex) > 1 || Number(this.SEX) > 1) && this.role > 1) {
              this.list[4].show = true
            }
            if (Number(this.age) > 45 && this.role > 1) {
              this.list[3].show = true
            }
            console.log(this.list)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    clickType (item) {
      if (item.name === '残疾人档案' || item.name === '查看残疾人档案' || item.name === '新建残疾人档案') {
        if (this.isCanji === true) {
          // 有残疾人档案
          this.$router.push({path: '/admin', query: {userid: this.userid, id: this.disid}})
          // window.location.href = videoHttp.Http + 'vue_disabler/#/admin?userid=' + this.userid + '&id=' + this.disid
        } else {
          // 有残疾人档案
          this.$router.push({path: '/admin', query: {userid: this.userid, id: ''}})
          // window.location.href = videoHttp.Http + 'vue_disabler/#/admin?userid=' + this.userid + '&id='
          // window.location.href = videoHttp.Http + 'vue_disabler/#/newperple?userid=' + this.userid
        }
        // this.$http.findOneDisPeople({id: this.id})
        // // {id: this.id}
        //   .then(res => {
        //     console.log(res)
        //     // 如果内容不为空
        //     if (res.data.fail === true) {
        //       // 没有残疾人档案
        //       window.localStorage.setItem('disid', JSON.stringify({id: ''}))
        //       window.localStorage.setItem('userid', JSON.stringify({id: this.userid}))
        //       window.localStorage.setItem('gerenid', JSON.stringify({id: this.id}))
        //       window.location.href = videoHttp.Http + 'vue_disabler/#/newperple?userid=' + this.userid
        //     } else {
        //       // 这是有残疾人档案
        //       window.localStorage.setItem('disid', JSON.stringify({id: res.data.disid}))
        //       window.localStorage.setItem('userid', JSON.stringify({id: this.userid}))
        //       window.localStorage.setItem('gerenid', JSON.stringify({id: this.id}))
        //       window.location.href = videoHttp.Http + 'vue_disabler/#/admin?userid=' + this.userid + '&id=' + res.data.disid
        //     }
        //   })
        //   .catch(err => {
        //     console.log(err)
        //   })
      } else {
        Toast('该功能正在开发中...')
      }
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100vw;
    height: 100%;
    background: #FAF9FE;
  }
  header {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    color: #333;
    background: white;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .solt{
    color: #1DA4F2;
  }
  header .div {
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  header .div:nth-child(2) {
    justify-content: center;
  }

  header div img {
    width: 7px;
    height: 13px;
    margin-left: 15px;
    margin-right: 5px;
  }
  .content .divList{
    width: 90%;
    height: 75px;
    background: #FFFFFF;
    border-radius: 10px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .divList ul{
    width: 100%;
    height: 75px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .content ul li{
    display: flex;
    align-items: center;
  }
  .content span{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .no {
   color: #999999 !important;
  }
  /deep/ .van-empty__image {
    width: 160px;
    height: 100px;
  }
  /deep/ .van-empty__image img {
    width: 160px;
    height: 100px;
  }
  /deep/ .van-empty{
    width: 100%;
    height: 80vh !important;
  }
  .btnSty{
    width: 60px;
    height: 20px;
    border: 1px solid #1DA4F2;
    border-radius: 2px;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1DA4F2;
    margin-right: 10px;
    background: transparent;
  }
</style>
